<template>
  <div class="box-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <div>
      <van-dropdown-menu active-color="#1989fa" :key="dropdownIndex">
        <van-dropdown-checkbox
          title="物品类型"
          :selectValue="selectedList2"
          :columns="options2"
          @comfirm="comfirmType2"
        ></van-dropdown-checkbox>
        <div class="searchTagIcon">
          <van-dropdown-item disabled>
            <span slot="title" @click="onScreen" style="float: right"
              ><van-icon name="filter-o" />
              <div
                style="
                  display: inline-block;
                  background-color: #f0f6fe;
                  width: 0.2rem;
                  height: 0.2rem;
                  text-align: center;
                  color: #1890ff;
                "
              >
                {{ topSearchNum }}
              </div></span
            >
          </van-dropdown-item>
        </div>
      </van-dropdown-menu>
    </div>

    <search-tag
      ref="SearchTag"
      :propsForSon="propsForSon"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>

    <!--分页列表 -->
    <div
      class="listBox"
      :style="{
        height: GLOBAL.currentEnvironment
          ? 'calc(100vh - 1rem)'
          : 'calc(100vh - 1.5rem)',
      }"
    >
      <!-- 头部模块 -->
      <div style="margin-bottom: 0.12rem">
        <div class="topBox">
          <div class="itemBox" v-for="(item, index) in topArray" :key="index">
            <div class="rightBox">
              <div class="rightBot">{{ item.title }}</div>
              <div class="rightTop">{{ item.number }}</div>
            </div>
          </div>
        </div>
      </div>
      <van-sticky :offset-top="90">
        <div style="background: #fff">
          <div style="width: 60%">
            <van-tabs
              title-active-color="#1890ff"
              color="#1890ff"
              v-model="tabActive"
            >
              <van-tab title="安全库存预警"></van-tab>
              <van-tab title="最大库存预警"></van-tab>
            </van-tabs>
          </div>
        </div>
      </van-sticky>
      <pageList
        v-show="tabActive == 0"
        ref="pageList"
        :checkedShow="checkedShow"
        :operationTxt="operationTxt"
        :columns="columns"
        :listUrl="listUrl"
        @getCheckedValue="getCheckedValue"
        @handleList="handleList"
      >
        <div
          slot="head"
          slot-scope="{ item }"
          class="title"
          style="width: 100%; margin-left: 0.12rem; margin-right: 0rem"
        >
          <div style="margin-left: 0">
            <div
              style="
                display: inline-block;
                width: 2.3rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              <span class="icon"></span> {{ item.goodsCode }}
            </div>
            <div
              slot="operation"
              style="
                position: relative;
                float: right;
                display: inline-block;
                padding-right: 0.15rem;
              "
            >
              <div
                style="
                  font-size: 0.14rem;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #888888;
                "
              >
                账面合格品
              </div>
            </div>
          </div>
        </div>
        <div class="rt-column" slot="body" slot-scope="{ item }">
          <div class="rt-row">
            <div class="column">
              <span class="column-t">安全库存：</span>
              <span class="column-c">{{ item.warningNumTxt }}</span>
              <!-- <span class="column-c">1000片</span> -->
              <div
                class="rightNum"
                :style="{
                  color:
                    item.goodsQualifiedNum >= item.warningNum
                      ? '#F25643'
                      : '#00b042',
                }"
              >
                {{ item.goodsQualifiedNumTxt }}
              </div>
            </div>
          </div>
          <div class="rt-row">
            <div class="column">
              <span class="column-t">物品名称：</span>
              <span class="column-c">{{ item.goodsName }}</span>
            </div>
          </div>
        </div>
        <div slot="label" slot-scope="{ item }">
          <div class="label">
            <span v-if="item.typeText">{{ item.typeText }}</span>
            <span v-if="item.categoryText">{{ item.categoryText }}</span>
          </div>
        </div>
        <div slot="right">giao</div>
      </pageList>
      <pageList
        v-show="tabActive == 1"
        ref="pageListMax"
        :checkedShow="checkedShowMax"
        :operationTxt="operationTxtMax"
        :columns="columnsMax"
        :listUrl="listUrlMax"
        @getCheckedValue="getCheckedValueMax"
        @handleList="handleListMax"
      >
        <div
          slot="head"
          slot-scope="{ item }"
          class="title"
          style="width: 100%; margin-left: 0.12rem; margin-right: 0rem"
        >
          <div style="margin-left: 0">
            <div
              style="
                display: inline-block;
                width: 2.3rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              <span class="icon"></span> {{ item.goodsCode }}
            </div>
            <div
              slot="operation"
              style="
                position: relative;
                float: right;
                display: inline-block;
                padding-right: 0.15rem;
              "
            >
              <div
                style="
                  font-size: 0.14rem;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #888888;
                "
              >
                账面合格品
              </div>
            </div>
          </div>
        </div>
        <div class="rt-column" slot="body" slot-scope="{ item }">
          <div class="rt-row">
            <div class="column">
              <span class="column-t">最大库存：</span>
              <span class="column-c">{{ item.warningNumTxt }}</span>
              <!-- <span class="column-c">1000片</span> -->
              <div
                class="rightNum"
                :style="{
                  color:
                    item.goodsQualifiedNum >= item.warningNum
                      ? '#F25643'
                      : '#00b042',
                }"
              >
                {{ item.goodsQualifiedNumTxt }}
              </div>
            </div>
          </div>
          <div class="rt-row">
            <div class="column">
              <span class="column-t">物品名称：</span>
              <span class="column-c">{{ item.goodsName }}</span>
            </div>
          </div>
        </div>
        <div slot="label" slot-scope="{ item }">
          <div class="label">
            <span v-if="item.typeText">{{ item.typeText }}</span>
            <span v-if="item.categoryText">{{ item.categoryText }}</span>
          </div>
        </div>
        <div slot="right">giao</div>
      </pageList>
      <span v-if="showDiv"></span>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import { APILX } from "@/api/requestLx";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import moment from "moment";
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import { getDictModel } from "@/api/system";
export default {
  name: "waterLecelReport",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      dropdownIndex:0,
      topSearchNum: 0,
      tabActive: 0,
      topArray: [
        {
          title: "安全库存预警数",
          number: "0",
        },
        {
          title: "最大库存预警数",
          number: "0",
        },
      ],
      propsForSon: {},
      title: "库存水位预警表",
      rtitle: "",
      rname: "", //search
      checkedShow: false, //列表是否支持选择
      operationTxt: "确定1", //选择按钮名称
      listUrl: "/wms/wmsReportForms/securityPageList", //列表接口
      listUrlMax: "/wms/wmsReportForms/maxPageList", //列表接口
      checkedShowMax: false, //列表是否支持选择
      operationTxtMax: "确定1", //选择按钮名称
      columnsMax: {
        content: [
          //内容
          {
            name: "任务编号",
            key: ["taskCode"],
          },
          {
            name: "设备类别",
            key: ["programName"],
          },
        ],
      },
      columns: {
        content: [
          //内容
          {
            name: "任务编号",
            key: ["taskCode"],
          },
          {
            name: "设备类别",
            key: ["programName"],
          },
        ],
      },
      showSearchTag: false,
      params: {},
      options2: [],
      selectedList: [],
      selectedList2: [],
      showDiv: false,
    };
  },
  beforeRouteLeave(to, from, next) {
    let that = this;
    switch (true) {
      case that.showSearchTag && !that.$refs.SearchTag.ddthrVisible:
        that.showSearchTag = false;
        this.title = "库存水位预警表";
        next(false);
        break;
      case that.$refs.SearchTag.ddthrVisible:
        that.$refs.SearchTag.ddthrVisible = false;
        this.title = "更多筛选";
        next(false);
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  computed: {},
  mounted() {
    this.searchQuery();
    this.getSelectList();
  },
  created() {},
  methods: {
    goSearch2() {
      //   this.searchQuery();
      alert("搜索");
    },
    onScreen() {
      this.propsForSon = {
        ...this.params,
      };
      this.showSearchTag = true;
      this.title = "更多筛选";
    },
    goAdd() {
      this.$router.push("/inspectionTaskForm");
    },
    setColor(item) {
      let colors = {
        0: "#ff9d51",
        1: "#00b042",
      };
      return colors[item["taskStatus"]] || "";
    },
    getSelectList() {
      // 字典接口res.result
      getDictModel({ dictCode: "wms_goods_type" }).then((res) => {
        this.options2 = res.result;
      });
    },
    comfirmType2(v) {
      this.params.type = v;
      this.searchQuery();
    },
    /* 承诺交期是否超时判断 */
    promiseDateCheck(v) {
      let toDay = moment().format("YYYY-MM-DD");
      let checked = false;
      if (toDay == v) {
        checked = false;
      } else {
        checked = moment(v).isSameOrBefore(toDay);
      }
      return checked ? "" : "#ff4d4f";
    },
    toReport(v) {
      this.$router.push({
        path: "/checkReport",
        query: {
          id: v.id,
          goodsId: v.goodsId,
        },
      });
    },
    resetCategory() {
      this.showSearchTag = false;
    },
    getCategory(p) {
      this.params = p;
      this.selectedList2 = p.type ? p.type.split(",") : [];
      this.showSearchTag = false;
      console.log(this.params);
      this.title = "库存水位预警表";
      this.searchQuery();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    getCheckedValueMax(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
      // if (type === "列表") {
      //   this.$router.push({
      //     path: "/inspectionTaskDetail",
      //     query: {
      //       id: id,
      //       item: item,
      //     },
      //   });
      // } else {
      // }
    },
    //列表点击事件
    handleListMax(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
      // if (type === "列表") {
      //   this.$router.push({
      //     path: "/inspectionTaskDetail",
      //     query: {
      //       id: id,
      //       item: item,
      //     },
      //   });
      // } else {
      // }
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
      this.$refs.pageListMax.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      console.log(this.params, "头部数量");
      // 输出this.params不为空时候的字段个数
      // 剔除this.params中的空字段
      let params = {};
      for (let key in this.params) {
        if (this.params[key]) {
          params[key] = this.params[key];
        }
      }
      console.log(params, "搜索条件");

      console.log(Object.keys(params).length, "0.0");
      this.topSearchNum = Object.keys(params).length;
      this.showDiv = !this.showDiv;
      this.dropdownIndex +=1
      this.selectedList2 = params.type ? params.type.split(",") : [];
      console.log(this.topSearchNum, "this.topSearchNum+++++");
      let queryParam = {
        ...this.params,
      };
      this.$refs.pageList.searchQuery(queryParam);
      this.$refs.pageListMax.searchQuery(queryParam);
      this.initDataTop(queryParam);
    },
    initDataTop(parameter) {
      APILX.getWarningNum(parameter).then((res) => {
        if (res.success) {
          this.topArray[0].number = res.result.securityWarnNum || "0";
          this.topArray[1].number = res.result.maxWarnNum || "0";
        } else {
          this.$antdMessage.warning(res.message);
        }
      });
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
      this.$refs.pageListMax.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-content {
  height: 100vh;
  overflow-y: hidden;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.foot-slot {
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  color: #1890ff;
}
/deep/.van-nav-bar {
  z-index: 99 !important;
}
.rt-column {
  padding: 0.17rem 0 0 0.17rem;
  //  border: 1px solid red;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
  .title {
    width: 3.1rem;
    margin-right: 0.1rem;
    // height: 0.16rem;
    font-size: 0.16rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #191f25;
    // line-height: 0.23rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .label {
    margin-left: -0.03rem;
    margin-top: -0.1rem;
    span {
      height: 0.16rem;
      background: #f0f6fe;
      color: #1890ff;
      margin-right: 0.1rem;
      padding: 0.03rem 0.08rem;
      font-size: 0.11rem;
      border-radius: 0.03rem;
    }
  }
}
div.topBox {
  display: flex;
  justify-content: space-between;
  margin-top: 0.12rem;
  //   align-items: center;
  // margin-bottom: 16px;
  box-sizing: border-box;
  //   padding: 0.23rem 0;
  background: #fff;
  div.itemBox {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    flex: 1;
    box-sizing: border-box;
    // height: 1rem;
    padding: 0.24rem 0.12rem;
    position: relative;
    border-right: 1px solid #eeeeee;

    div.rightBox {
      //   text-align: center;
      //   height: 0.44rem;
      //   cursor: pointer;
      //   display: flex;
      //   align-items: flex-start;
      //   flex-direction: column;
      //   justify-content: flex-start;
      margin-left: 0.16rem;
      div.rightTop {
        font-size: 0.24rem;
        color: #191f25;
        line-height: 0.24rem;
        margin-top: 0.12rem;
      }

      div.rightBot {
        font-size: 0.14rem;
        color: #888888;
      }
    }
  }
}
.topBox .itemBox:last-child {
  border: none;
}
/deep/ .list .wrap:first-child {
  margin-top: 0 !important;
}
/deep/.van-tabs__line {
  width: 0.8rem;
}
.icon {
  display: inline-block;
  width: 0.03rem;
  height: 0.14rem;
  background: #1890ff;
  //   margin-right: 0.05rem;
  position: relative;
  //   left: -0.1rem;
  top: 0.01rem;

  right: 0.009rem;
}
.rightNum {
  display: inline-block;
  float: right;
  padding-right: 0.07rem;
  font-weight: 500;
  font-size: 0.16rem;
  position: relative;
  bottom: 0.2rem;
}
/deep/ .van-dropdown-menu__item--disabled .van-dropdown-menu__title::after {
  display: none;
}
</style>
